<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据</title>
    <link rel="stylesheet" type="text/css" href="/static/plugin/layui/css/layui.css"> 
</head>
<style>
    .layui-table-cell {
        padding:0 5px;
        height:auto;
        overflow:visible;
        text-overflow:inherit;
        white-space:normal;
        word-break: break-all;
    }
</style>
<body>
<div style=" margin: 30px;">

    <div class="layui-form">

        <div class="layui-inline ">
            <label class="layui-form-label">游戏</label>
            <div class="layui-input-block">
                <select name="pid" id="pid">
                    {{range $index,$pro := .Pros}}
                    <option value="{{$pro.Id}}">{{$pro.Game_name}}{{$pro.Server_type}}</option>
                    {{end}}
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">查询日期</label>
            <div class="layui-input-inline">
                <input style="width: 200px" type="text" class="layui-input" id="date" placeholder="请选择查询日期" readonly>
            </div>
        </div>

        <div class="layui-inline data-search" style="margin-left: 30px">
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>


    </div>

    <table class="layui-hide" id="datatable" lay-filter="datatable" lay-size="sm" lay-skin="row"></table>

</div>
</body>
<script src="/static/plugin/layui/layui.js"> </script> 
<script src="/static/js/jquery.js"> </script> 
</html>
<script>
    $(function(){
        layui.use(['laydate','form','table'], function(){
            var laydate = layui.laydate;
            var _form = layui.form;
            //渲染range时间控件
            laydate.render({
                elem: '#date'
                ,type: 'date'
                ,value: '{{$.Date}}'
                ,range: true
                ,trigger:'click'
            });
        });
    });

    $('.data-search .layui-btn').on('click', function(){
        var loading;
        loading = layer.load(1, {
            //shade: [0.1,'#fff']
            time: 4*1000
        });
        $.post(
                "/get_data",
                {
                    "pro_id": $("#pid").val(),
                    "date": $("#date").val() 
                },
                function(data){
                    if(data.Code==0){
                        layui.use(['table','laypage'], function(){
                            var table = layui.table;
                            table.render({
                                elem: '#datatable'
                                ,data: data.Date.Param
                                ,toolbar: '#toolbar'
                                ,cellMinWidth: 60
                                ,id: 'Reload'
                                ,page: false
                                ,limit:1000
                                ,cols: [
                                    data.Date.Header
                                ],
                                done: function () {
                                    layer.close(loading);
                                }
                            });
                        });
                    }else{
                         layer.msg(data.Date)
                    }
                    
                },
                'json'
        );
    });
</script>